<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
  <!--/* 共用JS与CSS */-->
  <th:block th:replace="assets/include :: scriptcss('个人设置')"/>
</head>
<body>
  <v-app id="app" v-cloak>
    <!-- 顶部功能区 -->
    <v-app-bar app flat :color="vdark? null : 'white'">
      <th:block th:replace="assets/include :: header"/>
    </v-app-bar>

    <!-- 左侧区域::导航菜单 -->
    <th:block th:replace="assets/include :: navMenu"/>

    <!-- 主体部分 -->
    <v-main>
      <!-- 主体容器 -->
      <v-container fluid>
        <v-card flat class="rounded-0 pa-6">
          <v-tabs vertical active-class="bg-sky-blue-font-weight">
            <v-tab style="width:200px;" @change="resetForm" v-t="'安全设置'"></v-tab>
            <v-tab style="width:200px;" @change="queryHomeSettings" v-t="'设置默认首页'"></v-tab>

            <v-tab-item class="pa-5 pt-1">
              <v-row>
                <v-col cols="5">
                  <!-- 表单 -->
                  <validation-observer ref="observer" v-slot="{handleSubmit}">
                    <v-form ref="dataForm" @submit.prevent="handleSubmit(doSubmit)">
                      <validation-provider ref="passwordRefVP" :mode="vchange" v-slot="{ errors }" name="旧密码" rules="required|alpha_num|max:30|async:system/user/secure/check,password,passwordRef">
                        <v-text-field ref="passwordRef" outlined dense clearable type="password" :error-messages="errors" v-model.trim="formData.password" :label="$t('旧密码')">
                          <template #progress>
                            <v-fade-transition>
                              <v-progress-circular
                                  width="3"
                                  size="24"
                                  color="info"
                                  indeterminate
                                  class="mt-2"
                              ></v-progress-circular>
                            </v-fade-transition>
                          </template>
                        </v-text-field>
                      </validation-provider>
                      <validation-provider v-slot="{ errors }" name="新密码" rules="required|alpha_num|max:30">
                        <v-text-field outlined dense clearable type="password" :error-messages="errors" vid="新密码" v-model.trim="formData.newPassword" :label="$t('新密码')"></v-text-field>
                      </validation-provider>
                      <validation-provider v-slot="{ errors }" name="确认密码" rules="required|confirmed:新密码">
                        <v-text-field outlined dense clearable type="password" :error-messages="errors" v-model.trim="confirmPassword" :label="$t('确认密码')"></v-text-field>
                      </validation-provider>

                      <!-- 提交按钮 -->
                      <v-btn large color="red accent-3" class="white--text" type="submit" :loading="posting">{{t('修改密码')}}</v-btn>
                    </v-form>
                  </validation-observer>
                </v-col>
              </v-row>
            </v-tab-item>

            <v-tab-item class="pa-5 pt-1">
              <v-card flat outlined class="mx-auto">
                <v-card-text class="text-h5 font-weight-bold text-center pa-10" style="position: relative;">
                  {{$t(homeName)}}
                  <v-btn absolute fab right bottom color="pink" class="white--text" :loading="loading" @click="openWinDrawer">
                    <v-icon>mdi-cog-outline</v-icon>
                  </v-btn>
                </v-card-text>
                <v-divider></v-divider>
                <v-card-actions>
                  <v-btn-confirm :message="$t('确定清除设置？')" :disabled="disableClear" @confirm="clearHomeSettings">
                    <v-btn text :disabled="disableClear" v-t="'清除设置'"></v-btn>
                  </v-btn-confirm>
                </v-card-actions>
              </v-card>
            </v-tab-item>
          </v-tabs>
        </v-card>
      </v-container>
    </v-main>

    <!-- 菜单选择窗口 -->
    <v-navigation-drawer fixed temporary right :width="winDrawerWidth" v-model="winDrawer">
      <v-sheet>
        <v-app-bar flat dark color="indigo darken-2">
          <v-toolbar-title class="text-subtitle-1 font-weight-bold">{{$t('设置默认首页')}}</v-toolbar-title>
          <v-spacer></v-spacer>
          <v-btn icon @click="closeWinDrawer">
            <v-icon>mdi-close</v-icon>
          </v-btn>
        </v-app-bar>
        <v-card flat tile :loading="loading" class="pb-13">
          <v-container>
            <v-treeview dense transition hoverable activatable open-on-click shaped class="text-subtitle-2" item-key="menuId" item-text="menuName" :open="openItems" :active="activeItems" :items="myMenuList" @update:active="treeActiveEvent"></v-treeview>
            <v-sheet v-if="myMenuList.length < 1" v-text="$vuetify.lang.t('$vuetify.noDataText')"></v-sheet>
          </v-container>
        </v-card>
      </v-sheet>
      <v-footer fixed class="border-top justify-end" :color="vdark? null : 'white'">
        <v-btn depressed outlined text class="mr-4" @click="closeWinDrawer" v-t="'关闭'"></v-btn>
        <v-btn depressed color="info" :loading="posting" :disabled="!selectedMenuId" @click="updateHomeSettings">{{$t('保存')}}</v-btn>
      </v-footer>
    </v-navigation-drawer>
  </v-app>

  <!-- 导入Vuetify扩展组件 -->
  <th:block th:replace="assets/vuetify :: v-btn-confirm"/>

  <!-- 业务js -->
  <script type="text/javascript" th:src="@{/js/system/user/profile.js?_t=#buildtime#}"></script>
</body>
</html>
